<script lang="ts">
  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { tooltip } from "$lib/js/tooltip";

  import type { Quiz, KV } from "$lib/ebm";
  import {
    Query,
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";
  import { request, gql } from "graphql-request";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let quizid = attributes.find((x) => x.k == "quiz_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let endpoint = $actixGraphqlEndpoint;
  const FIND_QUIZ_QUERY = gql`
    query ($id: ID!) {
      quiz: node(id: $id) {
        id
        createdAt
        updatedAt
        ... on Quiz {
          seq
          level
          subject
          title
          m3U8
          description
          descriptionMarkdown
          myEbpInfo {
            userId
            quizId
            ebpAt
          }
          quizItems {
            id
            title
            description
            descriptionMarkdown
            m3U8
            isMaster
            masterId
            options {
              k
              v
            }
            master {
              id
              title
              description
            }
          }
        }
      }
    }
  `;

  const findQuizResult = useQuery<Quiz, { message: string }>(
    ["quiz", quizid.v],
    async () => {
      const { quiz } = await request(endpoint, FIND_QUIZ_QUERY, {
        id: quizid.v,
      });
      return quiz;
    }
  );

  let activePropertyId = "";
  const handlePropertyClick = (id) => () => (activePropertyId = id);
</script>

{#if $findQuizResult.isLoading}
  Loading...
{:else if $findQuizResult.isError}
  Error {$findQuizResult.error.message}
{:else if $findQuizResult.data}
  <div class="w-full grid grid-cols-2">
    <table class="bg-white text-gray-900 table-auto ">
      <thead>
        <tr
          ><th
            colspan="3"
            class="text-left text-lg bg-blue-700 border-b-2  text-white"
          >
            Properties Of This Quiz({$findQuizResult.data.title})
          </th></tr
        >
        <tr>
          <th class="bg-blue-700 text-white p-2">Property</th>
          <th class="bg-blue-700 text-white p-2">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr
          class="{activePropertyId === 'title'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("title")}
        >
          <td class="p-2">Title</td>
          <td class="p-2">
            <input
              class="rounded-md w-full h-12"
              type="text"
              placeholder="Quiz Title"
              value={$findQuizResult.data.title}
              use:tooltip={{ theme: "light" }}
              title="Quiz Title"
            />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'm3u8'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("m3u8")}
        >
          <td class="p-2">HLS m3u8</td>
          <td class="p-2">
            <input
              class="rounded-md w-full h-12"
              type="text"
              placeholder="HLS m3u8 file path"
              value={$findQuizResult.data.m3U8}
              use:tooltip={{ theme: "light" }}
              title="HLS m3u8 file path"
            />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'description'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 "
          on:click={handlePropertyClick("description")}
        >
          <td class="p-2">Description</td>
          <td class="p-2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-20"
              value={$findQuizResult.data.description}
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="ml-2 bg-gray-100 flex flex-col">
      <div class=" text-lg text-left w-full bg-green-300">
        Property Description Preview
      </div>
      <div class="bg-gray-200">
        {@html $findQuizResult.data.descriptionMarkdown}
      </div>
    </div>
  </div>
{:else}
  No Property for quizid.k={quizid.v}?
{/if}
